<template>
    <a-modal
        :title="tableTitle"
        :visible="visible"
        width="1200px"
        @ok="handleOk"
        :maskClosable="false"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
    >

        <a-form-model ref="form" :model="form" :rules="rules">

            <a-descriptions bordered :column="2">
                <a-descriptions-item label="政策原文" :span="1">
                    <a-form-model-item
                        prop="policyOriginalTextId">
                        <a-select
                            v-model="form.policyOriginalTextId"
                            placeholder="请选择政策原文"
                            allowClear
                            @change="originalTextChange">
                            <a-select-option :value="item.dataValue" :key="index" v-for="(item,index) in policyTitleOptions">{{ item.dataName }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策小标题" :span="1">
                    <a-form-model-item
                        prop="policySmallTitle"
                        :rules="{
                            required: true,
                            message: '请输入政策小标题',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入政策小标题"
                                 v-model="form.policySmallTitle"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策类型" :span="1">
                    <a-form-model-item
                        prop="policyType"
                        :rules="{
                            required: true,
                            message: '请选择政策类型',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.policyType"
                            placeholder="请选择政策类型"
                            @change="() => {form.declareBeginDateTime = null, form.declareEndDateTime = null}"
                            showSearch
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['POLICY_TYPE'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策状态" :span="1">
                    <a-form-model-item
                        prop="policyStatus"
                        :rules="{
                            required: true,
                            message: '请选择政策状态',
                            trigger: 'change',
                        }">
                        <a-radio-group v-model="form.policyStatus">
                            <a-radio value="1">有效</a-radio>
                            <a-radio value="2">失效</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策补贴类型" :span="1">
                    <a-form-model-item
                        prop="subsidyType"
                        :rules="{
                            required: true,
                            message: '请选择政策补贴类型',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.subsidyType"
                            placeholder="请选择政策补贴类型"
                            @change="() => {form.subsidy = 0}"
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['SUBSIDY_TYPE'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="补贴金额(万元)" :span="1">
                    <a-form-model-item
                        prop="subsidy"
                        :rules="{
                            required: true,
                            message: '请输入补贴金额',
                            trigger: 'change',
                        }">
                        <a-input-number
                            :min="0"
                            placeholder="请输入补贴金额"
                            :disabled="form.subsidyType == '2'"
                            v-model="form.subsidy">
                        </a-input-number>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="标签" :span="1">
                    <a-form-model-item>
                        <a-select
                            v-model="form.tagCodes"
                            placeholder="请选择标签"
                            showSearch
                            allowClear
                            mode="multiple"
                            :maxTagCount="2"
                            :token-separators="[',']">
                            <a-select-option :value="item.codeMasterValue" :key="index"
                                             v-for="(item,index) in ($store.getters.dictionary['PUBLISH_TAG'])">
                                {{item.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="领域" :span="1">
                    <a-form-model-item>
                        <a-select
                            v-model="form.domainCodes"
                            placeholder="请选择领域"
                            showSearch
                            allowClear
                            mode="multiple"
                            :maxTagCount="2"
                            :token-separators="[',']">
                            <a-select-option :value="item.codeMasterValue" :key="index"
                                             v-for="(item,index) in ($store.getters.dictionary['POLICY_RISING_DOMAIN'])">
                                {{item.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="发布部门" :span="1">
                    <a-form-model-item
                        prop="publishDepartmentCode"
                        :rules="{
                            required: true,
                            message: '请选择发布部门',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.publishDepartmentCode"
                            placeholder="请选择发布部门"
                            showSearch
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['PUBLISH_DEPARTMENT'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="区域" :span="1">
                    <a-form-model-item
                        prop="policyAreaCode"
                        :rules="{
                            required: true,
                            message: '请选择政区域',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.policyAreaCode"
                            placeholder="请选择区域"
                            showSearch
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['PUBLISH_AREA'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策解读分类" :span="2" v-if="!isChild">
                    <a-form-model-item
                        prop="unscrambleType"
                        :rules="{
                            required: true,
                            message: '请选择政策解读分类',
                            trigger: 'change',
                        }"
                        style="width: 50%;">
                        <xlCascader
                            :options="unscrambleTypeOptions"
                            placeholder="请选择政策解读分类"
                            v-model="form.unscrambleType"
                            allowClear
                        />
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="申报时间" :span="2">
                    <a-form-model-item
                        prop="declareBeginDateTime"
                        :rules="{
                            required: form.policyType == '1',
                            message: '请选择申报时间',
                            trigger: 'change',
                        }">
                        <div class="xl-dateRange">
                            <xlDate class="xl-dateRange-start"
                                    dataType="dateTime"
                                    :disabled-date="(e)=>{
                                       return disabledStartDate(e,form.declareEndDateTime)
                                    }"
                                    placeholder="开始日期"
                                    :disabled="form.policyType != '1'"
                                    v-model="form.declareBeginDateTime">
                            </xlDate>
                            <xlDate class="xl-dateRange-end"
                                    dataType="dateTime"
                                    :disabled-date="(e)=>{
                                       return disabledEndDate(e,form.declareBeginDateTime)
                                    }"
                                    placeholder="结束日期"
                                    :disabled="form.policyType != '1'"
                                    v-model="form.declareEndDateTime">
                            </xlDate>
                        </div>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="知识库" :span="2">
                    <a-form-model-item>
                        <a-tree-select
                            v-model="form.policyKnowledge"
                            tree-default-expand-all
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            :tree-data="knowledgeOptions"
                            placeholder="请选择知识库分类"
                            :replaceFields="{label: 'title', value: 'key', children: 'children'}"
                            :multiple="true"
                            allowClear
                        ></a-tree-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="申报条件" :span="2">
                    <a-form-model-item
                        prop="declareCondition"
                        :rules="{
                            required: true,
                            message: '请输入申报条件',
                            trigger: 'change',
                        }">
                        <ueditor
                            v-model="form.declareCondition"
                        >
                        </ueditor>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="申报材料" :span="2">
                    <a-form-model-item
                        prop="declareMaterial"
                        :rules="{
                            required: true,
                            message: '请输入申报材料',
                            trigger: 'change',
                        }">
                        <ueditor
                            v-model="form.declareMaterial"
                        >
                        </ueditor>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="支持力度" :span="2">
                    <a-form-model-item>
                        <ueditor
                            v-model="form.supportIntensity"
                        >
                        </ueditor>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="宣传图片" :span="2">
                    <a-form-model-item>
                        <xlImages
                            v-model="form.policyImageUrl"
                            name="file"
                            accept=".jpg, .jpeg, .png"
                            :max="1"
                        >
                        </xlImages>
                    </a-form-model-item>
                </a-descriptions-item>
            </a-descriptions>

        </a-form-model>
    </a-modal>
</template>

<script>
import xlDate from "@/components/formUntil/xlDate";
import ueditor from '@/components/ueditor'
import xlImages from '@/components/formUntil/xlImages'
import xlCascader from '@/components/formUntil/xlCascader'
import {knowledgeTypeTree, policyOriginalTextDetailGet} from "@/assets/api/policy";
export default {
    name: "xlForm",
    data(){
        return {
            form: {},
            tableTitle: '新增',
            confirmLoading: false,
            formData: {},
            rules: {},
            visible: false,
            type: 1,
            unscrambleTypeOptions:[],
            policyTitleOptions:[],
            isChild: false,
            knowledgeOptions: []
        }
    },
    components: {
        xlImages,
        xlCascader,
        ueditor,
        xlDate
    },
    methods:{
        handleOk() {
            this.$refs.form.validate(async (valid, value) => {
                if (valid) {
                    this.confirmLoading = true
                    await this.$emit('handleOk', this.form)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleCancel() {
            this.visible = false
        },
        formatData(data) {
        },
        formatForm(form) {
            delete form.createDateTime
            delete form.modifyDateTime
            delete form.modifyBy
            delete form.createBy
            //整理字段数据 ／ 赋值 清空等
            this.$nextTick(_ => {
                this.$refs.form.resetFields();
                this.form = {}
                this.form = Object.assign({}, form)
            })
        },
        disabledStartDate(startValue,form){
            const endValue = new Date(form).getTime();
            if (!startValue || !endValue) {
                return false;
            }
            console.log(startValue.valueOf() > endValue.valueOf())
            return startValue.valueOf() > endValue.valueOf();
        },
        disabledEndDate(endValue,form) {
            const startValue =  new Date(form).getTime();
            if (!endValue || !startValue) {
                return false;
            }
            return startValue.valueOf() >= endValue.valueOf();
        },
        originalTextChange(e) {
            if (!e) {
                return;
            }
            policyOriginalTextDetailGet({
                param: {id: e}
            }).then(result => {
                console.log(result)
                let form = {
                    policySmallTitle: result.result.policyTitle,
                    policyType: result.result.policyType,
                    policyStatus: result.result.urlInvalid ? '2' : '1',
                    publishDepartmentCode: result.result.publishDepartmentCode,
                    policyAreaCode: result.result.policyAreaCode
                }
                this.form = {...this.form, ...form}
            })
        },
        initKnowledgeData() {
            knowledgeTypeTree().then(res => {
                // 禁用父节点选择
                res.result.map(item => this.disableParentNodeSelect(item))
                this.knowledgeOptions = res.result
            })
        },
        disableParentNodeSelect(data) {
            if (data.children && data.children.length > 0) {
                data.disabled = true
                data.children.map(item => this.disableParentNodeSelect(item))
            }
        }
    }
}
</script>

<style scoped lang="less">
/deep/ .ant-form-item {
    margin: 0;
}

/deep/ .ant-input-number {
    width: 100%;
}

.xl-dateRange {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .xl-dateRange-start{
        width: calc(50% - 10px);
    }
    .xl-dateRange-end{
        width: calc(50% - 10px);
    }
}
</style>